<template>
	<view class="detail">
		<view class="top">
			<image src="../../static/tabsIcon/down.png" mode=""></image>
			<view v-if="type==0" class="sta">
				{{ info.status | tstatus }}
			</view>
			<view v-if="type==1" class="sta">
				{{ info.orderStatus | orderStatus }}
			</view>
			<view v-if="type==2" class="sta">
				{{ info.orderSubStatusName }}
			</view>
			<view v-if="type==3" class="sta">
				{{ info.status | status}}
			</view>

			<view v-if="type==4" class="sta">
				{{ info.logisticsStatus  | minestatus}}
			</view>

			<view v-if="type==5" class="sta">
				{{ info.orderStatus  | pddstatus}}
			</view>
		</view>

		<view v-if="type==0" class="item">
			<view class="top">
				<image :src="info.goodsImg" class="goods" mode=""></image>
				<view class="info">
					<view class="name">
						{{ info.goodsName }}
					</view>
					<view class="miaoshu">
						<!-- {{ item.goodsSpecificationsValue }} -->
					</view>
				</view>
				<view class="status">
					<view class="yuan1"> ￥{{ info.goodsPrice }} </view>
					<view class="yuan2"> x{{ info.goodsNum }} </view>
				</view>
			</view>
			<view class="price">
				<view class="shi"> 实付￥{{ info.alipayTotalPrice }} </view>
			</view>
		</view>

		<view v-if="type==1" class="item">
			<view class="top">
				<image :src="info.imageUrl" class="goods" mode=""></image>
				<view class="info">
					<view class="name">
						{{ info.skuName }}
					</view>
					<view class="miaoshu">
						<!-- {{ item.goodsSpecificationsValue }} -->
					</view>
				</view>
				<view class="status">
					<view class="yuan1"> ￥{{ info.price }} </view>
					<view class="yuan2"> x{{ info.skuNum }} </view>
				</view>
			</view>
			<view class="price">
				<view class="shi"> 实付￥{{ info.price * info.skuNum}} </view>
			</view>
		</view>

		<view v-if="type==2" class="item">
			<view class="top">
				<image :src="more.thumb" class="goods" mode=""></image>
				<view class="info">
					<view class="name">
						{{ more.name }}
					</view>
					<view class="miaoshu">
						<!-- {{ item.goodsSpecificationsValue }} -->
					</view>
				</view>
				<view class="status">
					<view class="yuan1"> ￥{{ more.commissionTotalCost }} </view>
					<view class="yuan2"> x{{ more.count}} </view>
				</view>
			</view>
			<view class="price">
				<view class="shi"> 实付￥{{ info.totalCost }} </view>
			</view>
		</view>

		<view v-if="type==3" class="item">
			<view style="margin-bottom: 10upx;">
				{{ info.type | type}}
			</view>
			<view class="top">
				<view class="info" style="height: auto;">
					<view class="name">
						{{ info.orderName }}
					</view>
					<view class="miaoshu">
						<!-- {{ item.goodsSpecificationsValue }} -->
					</view>
				</view>
				<view class="status" style="height: auto;">
					<view class="yuan1"> ￥{{ info.payPrice }} </view>
					<view class="yuan2"> x1 </view>
				</view>
			</view>
			<view class="price">
				<view class="shi"> 实付￥{{ info.payPrice }} </view>
			</view>
		</view>

		<view v-if="type==5" class="item">
			<view class="top">
				<image :src="info.goodsThumbnailUrl" class="goods" mode=""></image>
				<view class="info">
					<view class="name">
						{{ info.goodsName }}
					</view>
					<view class="miaoshu">
						<!-- {{ item.goodsSpecificationsValue }} -->
					</view>
				</view>
				<view class="status">
					<view class="yuan1"> ￥{{ info.goodsPrice }} </view>
					<view class="yuan2"> x{{ info.goodsQuantity }} </view>
				</view>
			</view>
			<view class="price">
				<view class="shi"> 实付￥{{ info.orderAmount }} </view>
			</view>
		</view>

		<view class="nums">
			<view class="title">
				订单信息
			</view>
			<view class="nums_item">
				<view class="item_name">
					订单编号：
				</view>
				<view v-if="type==0" class="item_nums">
					{{info.orderNo}}
				</view>
				<view v-if="type==1" class="item_nums">
					{{info.orderNo}}
				</view>
				<view v-if="type==2" class="item_nums">
					{{info.orderSn}}
				</view>
				<view v-if="type==3" class="item_nums">
					{{info.orderNo}}
				</view>
				<view v-if="type==4" class="item_nums">
					{{info.orderNo}}
				</view>
				<view v-if="type==5" class="item_nums">
					{{info.orderSn}}
				</view>
			</view>
			<!-- 		<view class="nums_item">
				<view class="item_name">
					交易号：
				</view>
				<view class="item_nums">
					111
				</view>
			</view> -->
			<view class="nums_item">
				<view class="item_name">
					创建时间：
				</view>
				<view class="item_nums">
					{{info.gmtCreate | times}}
				</view>
			</view>
			<view v-if="type == 4 && info.logisticsStatus==2" class="nums_item">
				<view class="item_name">
					快递单号：
				</view>
				<view class="item_numss">
					{{info.logisticsNo}}
					<view @click="copynum(info.logisticsNo)" class="copy_btn">
						复制单号
					</view>
				</view>
			</view>
		</view>


		<view class="nums" v-if="info.refundtime != null">
			<view class="title">
				退款信息
			</view>
			<view class="nums_item">
				<view class="item_name">
					退款时间：
				</view>
				<view class="item_nums">
					{{info.refundtime | times}}
				</view>

			</view>
			<view class="nums_item">
				<view class="item_name">
					退款金额：
				</view>
				<view class="item_nums">
					{{info.refundprice}}
				</view>
			</view>
		</view>

		<view v-if="type==4" class="item">
			<view class="top">
				<image :src="info.goodsMainImages" class="goods" mode=""></image>
				<view class="info">
					<view class="name">
						{{ info.goodsName }}
					</view>
					<view class="miaoshu">
						<!-- {{ item.goodsSpecificationsValue }} -->
					</view>
				</view>
				<view class="status">
					<view class="yuan1"> ￥{{info.price }} </view>
					<view class="yuan2"> x{{ info.num}} </view>
				</view>
			</view>
			<view class="price">
				<view class="shi"> 实付￥{{ info.totalPrice }} </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		taobaodetail,
		getJDOrderById,
		getWeiPinHuiOrderById,
		getmeituanOrderById,
		mineOrderById,
		pddorderdetail
	} from "@/api/orderlist";
	export default {
		data() {
			return {
				info: [],
				more: [],
				type: 9,
				id: '',
			}
		},
		filters: {
			type(text) {
				let str = ""
				if (text == 0) {
					str = "团购订单"
				}
				if (text == 2) {
					str = "酒店订单"
				}
				if (text == 4) {
					str = "外卖订单"
				}
				return str
			},
			times(value) {
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				var timer = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				// var timer = y + '-' + MM + '-' + d;
				return timer;
			},
			minestatus(text) {
				let str = ""
				if (text == 0) {
					str = "未完成"
				}
				if (text == 1) {
					str = "待发货"
				}
				if (text == 2) {
					str = "已发货"
				}
				if (text == 3) {
					str = "已收货"
				}
				return str
			},
			orderStatus(text) {
				let str = ""
				if (text == 2) {
					str = "无效"
				}
				if (text == 3) {
					str = "已取消"
				}
				if (text == 15) {
					str = "待付款"
				}
				if (text == 16) {
					str = "已付款"
				}
				if (text == 17) {
					str = "已完成"
				}
				return str
			},

			tstatus(text) {
				let str = ""
				if (text == 3) {
					str = "已结算"
				}
				if (text == 12) {
					str = "待收货"
				}
				if (text == 13) {
					str = "已失效"
				}
				if (text == 14) {
					str = "已收货"
				}
				return str
			},

			status(text) {
				let str = ""
				if (text == 1) {
					str = "已付款"
				}
				if (text == 8) {
					str = "已完成"
				}
				if (text == 9) {
					str = "已退款"
				}
				if (text == 10) {
					str = "已结算"
				}
				return str
			},
			pddstatus(text) {
				let str = ""
				if (text == 0) {
					str = "已付款"
				}
				if (text == 1) {
					str = "已成团"
				}
				if (text == 2) {
					str = "确认收货"
				}
				if (text == 3) {
					str = "审核成功"
				}
				if (text == 4) {
					str = "审核失败"
				}
				if (text == 5) {
					str = "已结算"
				}
				if (text == 10) {
					str = "已处罚"
				}
				return str
			}
		},
		onLoad(option) {

			this.type = option.type;
			this.id = option.id;
			if (this.type == 0) {
				this.taobaodetail();
			} else if (this.type == 1) {
				this.getJDOrderById();
			} else if (this.type == 2) {
				this.getWeiPinHuiOrderById();
			} else if (this.type == 3) {
				this.getMeiTuanOrderById();
			} else if (this.type == 4) {
				this.mineOrderById();
			} else if (this.type == 5) {
				this.pddorderdetail();
			}
		},
		methods: {
			copynum(val) {
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功!'
						})
						console.log('success', val);
					},
					fail: function() {
						uni.showToast({
							icon: 'none',
							title: '复制失败!'
						})
					}
				});
			},
			pddorderdetail() {
				pddorderdetail(this.id).then((res) => {
					if (res.success == 1) {
						this.info = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
				.catch((res) => {
					console.log(res);
				});
			},
			taobaodetail() {
				taobaodetail(this.id).then((res) => {
						if (res.success == 1) {
							this.info = res.data
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch((res) => {
						console.log(res);
					});
			},
			getJDOrderById() {
				getJDOrderById(this.id).then((res) => {
						if (res.success == 1) {
							this.info = res.data
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch((res) => {
						console.log(res);
					});
			},
			getWeiPinHuiOrderById() {
				getWeiPinHuiOrderById(this.id).then((res) => {
						if (res.success == 1) {
							this.info = res.data;
							this.more = res.data.weiPinHuiGoods[0]
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch((res) => {
						console.log(res);
					});
			},
			getMeiTuanOrderById() {
				let sss = {
					id: this.id
				}
				getmeituanOrderById(sss).then((res) => {
						if (res.success == 1) {
							this.info = res.data;
							this.more = res.data.weiPinHuiGoods[0]
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch((res) => {
						console.log(res);
					});
			},
			mineOrderById() {
				let sss = {
					id: this.id
				}
				mineOrderById(this.id).then((res) => {
						if (res.success == 1) {
							this.info = res.data;
							this.more = res.data.weiPinHuiGoods[0]
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch((res) => {
						console.log(res);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f4f4f4;
	}

	.detail {
		padding: 20rpx;
	}

	.top {
		padding: 40rpx 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx rgba(27, 27, 27, 0.05);
		color: #131313;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		border-radius: 20rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
	}

	.item {
		margin: 30rpx 0;
		padding: 20rpx;
		background: #ffffff;
		border-radius: 20rpx;

		.top {
			// position: fixed;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 30rpx;

			.goods {
				width: 230rpx;
				height: 230rpx;
				border-radius: 16rpx;
			}

			.info {
				height: 230rpx;
				width: 250rpx;

				.name {
					color: rgba(0, 0, 0, 0.9);
					font-size: 28rpx;
					margin-bottom: 15rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}

				.miaoshu {
					color: rgba(0, 0, 0, 0.3);
					font-size: 22rpx;
				}
			}

			.status {
				// color: #FC6758;
				// font-size: 22rpx;
				text-align: right;

				.yuan1 {
					color: #333333;
					font-size: 26rpx;
					margin-bottom: 6rpx;
				}

				.yuan2 {
					color: #888888;
					font-size: 28rpx;
				}
			}
		}

		.price {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.shi {
				color: #EC5050;
				font-size: 34rpx;
			}
		}
	}

	.nums {
		margin-top: 40rpx;
		background: #FFF;
		border-radius: 20rpx;
		padding: 20rpx;
		color: #131313;

		.title {
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}

		.nums_item {
			font-size: 28rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.item_name {
				width: 150rpx;
				margin-right: 15rpx;
			}

			.item_nums {
				word-break: break-all;
			}

			.item_numss {
				display: flex;
				align-items: center;
				word-break: break-all;
				flex-wrap: wrap;

				.copy_btn {
					margin-left: 40rpx;
					color: blue;
				}
			}
		}
	}
</style>
